<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-row :gutter="30">
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header">
              <span>用户数</span>
            </div>
            <span>{{dashboardList.userCount}}</span>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header">
              <span>今天用户数</span>
            </div>
            <span>{{dashboardList.userToday}}</span>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div slot="header">
              <span>今日新增商品</span>
            </div>
            <span>{{dashboardList.productToday}}</span>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div slot="header">
              <span>全部商品数</span>
            </div>
            <span>{{dashboardList.productCount}}</span>
          </el-card>
        </el-col>
      </el-row>
      <div style="display:flex;justify-content:space-between;">
        <div id="echarts" />
       
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
var echarts = require("echarts");

import dashboardApi from "@/api/dash/dashboard";
export default {
  name: "Dashboard",
  data() {
    return {
      dashboardList: [],
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  created() {
    this.getDashboardList();
    
  },
  mounted() {
    this.myChart = echarts.init(document.getElementById("echarts"));
  },
  methods: {
    getDashboardList() {
      dashboardApi.dashboard().then((res) => {
       this.dashboardList = res;
       this.initChart();
      });
    },
    initChart() {
      var xData = [];
      var yData = [];
      for (var i = 0; i < this.dashboardList.orderByDay.length; i++) {
        var imgitem = this.dashboardList.orderByDay[i];
        xData.push(imgitem.date);
        yData.push(imgitem.count);
      }
       this.myChart.setOption({
        title: {
          text: "订单数据",
        },
        tooltip: {},
        xAxis: {
          data: xData,
          axisLabel: {
            rotate: 30,
          },
        },
        yAxis: {},
        series: [
          {
            name: "数量",
            type: "bar",
            data: yData,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
 
}
 #echarts {
  width: 900px;
  height: 500px;
  margin: 30px auto;
}
</style>
